<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]="formGroup" class="formGroup">
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'common_host_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
            <lv-select formControlName="host" [lvOptions]='hostOptions' lvValueKey='value' lvMode='multiple'
                [lvDisabled]="!!rowData" lvShowFilter lvFilterKey='label' lvFilterMode='contains'>
            </lv-select>
        </lv-form-control>
    </lv-form-item>
    <ng-container *ngIf="!isEapp">
        <lv-form-item>
            <lv-form-label></lv-form-label>
            <lv-collapse [lvType]="'simple'">
                <lv-collapse-panel [lvTitle]="titleTpl" [lvExpanded]="!!rowData?.extendInfo?.instanceIp">
                    <lv-form-control [lvErrorTip]="baseUtilService.ipErrorTip">
                        <input lv-input type="text" formControlName="instanceIp"
                            [ngClass]="{'ip-input-en': i18n.isEn, 'ip-input-zh': !i18n.isEn}"
                            placeholder="{{ 'protection_mysql_service_ip_placeholder_label' | i18n }}" />
                    </lv-form-control>
                </lv-collapse-panel>
            </lv-collapse>
        </lv-form-item>
    </ng-container>
    <ng-container *ngIf="isEapp">
        <lv-form-item >
            <lv-form-label lvRequired>
                {{ 'protection_eappmysql_service_ip_label' | i18n}}
            </lv-form-label>
            <lv-form-control [lvErrorTip]="baseUtilService.ipErrorTip">
                <input lv-input type="text" formControlName="instanceIp"
                    placeholder="{{ 'protection_eappmysql_service_ip_placeholder_label' | i18n }}" />
            </lv-form-control>
        </lv-form-item>
    </ng-container>

    <lv-form-item>
        <lv-form-label lvRequired>
            {{'common_port_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="portErrorTip">
            <input lv-input type="text" formControlName="port" placeholder='1~65535' />
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'common_username_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="usernameErrorTip">
            <input lv-input type="text" formControlName="userName" autocomplete="new-password"
                placeholder="{{ 'protection_database_username_placeholder_label' | i18n }}" />
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'common_password_label' | i18n}}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="passwordErrorTip">
            <aui-inupt-with-eye formControlName="password" [lvPasteAllowed]="false"></aui-inupt-with-eye>
        </lv-form-control>
    </lv-form-item>
  <!-- 字符集 单实例和集群实例都有这个参数 -->
  <lv-form-item>
    <lv-form-label>
      {{'common_character_set_label' | i18n}}
    </lv-form-label>
    <lv-form-control [lvErrorTip]="charsetErrorTip">
      <input lv-input type="text" formControlName="charset"/>
    </lv-form-control>
  </lv-form-item>

  <!-- MySQL配置文件路径 -->
  <lv-form-item>
    <lv-form-label>
      {{'protection_mysql_instance_register_config_path_label' | i18n}}
    </lv-form-label>
    <lv-form-control [lvErrorTip]="confPathErrorTip">
      <input lv-input type="text" formControlName="configPath"/>
      <span class="tips">
            {{ 'protection_mysql_instance_register_config_path_tips_label' | i18n }}
      </span>
    </lv-form-control>
  </lv-form-item>
  <!-- MySQL工具箱-->
  <lv-form-item>
    <lv-form-label>
      {{'protection_mysql_tool_path_label' | i18n}}
      <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_mysql_tool_path_tips_label' | i18n}}"
         class="configform-constraint" lvColorState='true'></i>
    </lv-form-label>
    <lv-form-control [lvErrorTip]="confPathErrorTip">
      <input lv-input type="text" formControlName="toolPath"/>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label>
      {{'protection_mysql_library_path_label' | i18n}}
      <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_mysql_library_path_tips_label' | i18n}}"
         class="configform-constraint" lvColorState='true'></i>
    </lv-form-label>
    <lv-form-control [lvErrorTip]="confPathErrorTip">
      <input lv-input type="text" formControlName="libraryPath"/>
    </lv-form-control>
  </lv-form-item>
</lv-form>
<ng-template #titleTpl>
    <lv-group lvGutter="8px">
        <span class="aui-link ip-tips">
            {{'protection_mysql_service_ip_label' | i18n}}
        </span>
    </lv-group>
</ng-template>
